<template>
	<view class="order">
		<view class="order-tabs">
			<view class="tabs">
				<view v-for="(tab, index) in list" :key="index" class="vs" :class="{ tab: true, activeto: index === currentTab }"
					@tap="currentTab = index">
					<view style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
						<view>{{tab.name}}</view>
						<text :class="{ tab: true, active: index === currentTab }"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="son">
			<!-- Tab内容区域 -->
			<view v-if="currentTab === 0 ">
				<!-- 代付款组件内容 -->
				<ToBePaid :productlist='orderList' />
			</view>
			<view v-if=" currentTab === 1 ">
				<!-- 已付款组件内容 -->
				<Paid :productlist='orderList' />
			</view>
			<view v-if=" currentTab === 2 ">
				<!-- 待发货组件内容 -->
				<ToBeShipped :productlist='orderList' />
			</view>
			<view v-if="currentTab === 3 ">
				<!-- 待收货组件内容 -->
				<ToBeReceived :productlist='orderList' />
			</view>
			<view v-if="currentTab === 4">
				<!-- 已完成组件内容 -->
				<Completed :productlist='orderList' />
			</view>
			<view v-if="currentTab === 5">
				<!-- 待评价组件内容 -->
				<ToBeReviewed :productlist='orderList' />
			</view>
		</view>
	</view>
</template>

<script>
	// 引入你的组件
	import ToBePaid from '@/components/toBePaid/toBePaid.vue';
	import Paid from '@/components/paid/paid.vue';
	import ToBeShipped from '@/components/toBeShipped/toBeShipped.vue';
	import ToBeReceived from '@/components/toBeReceived/toBeReceived.vue';
	import Completed from '@/components/completed/completed.vue';
	import ToBeReviewed from '@/components/toBeReviewed/toBeReviewed.vue';
	export default {
		components: {
			ToBePaid,
			Paid,
			ToBeShipped,
			ToBeReceived,
			Completed,
			ToBeReviewed,
		},
		onLoad(options) {
			this.currentTab = parseInt(options.stateIndex, 10) || 0; // 确保转换为数字，如果没有提供则默认为0
			console.log(this.currentTab);
		},
		data() {
			return {
				show: true,
				list: [{
					name: '代付款'
				}, {
					name: '已付款',
				}, {
					name: '待发货',
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '待评价'
				}],
				currentTab: 0,
				orderList: [{
						orderNum: '241512', //订单编号
						img: 'logo.png', // 商品图片路径
						name: 'logo', //商品名
						logistics: '', //物流信息 
						address: '中国', // 商品地址
						productInformation: '商品信息商品信息', //商品信息
						productStatus: '', //商品状态
						time: '中午12点', // 商品下单时间
						price: 19.99, // 商品价格
					},
					{
						orderNum: '241512', //订单编号
						img: 'logo.png', // 商品图片路径
						name: 'logo', //商品名
						logistics: '暂无', //物流信息 
						address: '中国', // 商品地址
						productInformation: '商品信息商品信息', //商品信息
						productStatus: '', //商品状态
						time: '中午12点', // 商品下单时间
						price: 19.99, // 商品价格
					},
				]
			}
		},
		methods: {
			tabChange(index) {
				console.log('tabChange called with index:', index);
				this.currentTab = index.index; // 假设currentTab是你需要更新的变量
				console.log(this.currentTab);
				this.show = false
			},
		},
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
	.order {
		width: 100%;
	}
	.tabs {
		display: flex;
		flex-direction: row;
	}
	/* #ifdef H5 */
	.vs {
		
		margin: 0px 30px;
	}
	.order-tabs {
		width: 100%;
		margin: auto;
		background-color: #fff;
		height: 42px;
		line-height: 22px;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-content: space-around;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}
	.tab .active {
		width: 65rpx;
		margin-top: 2px;
		border-bottom: 3px #ff6600 solid;
	}
	.tab.activeto {
		font-weight: 600;
		color: #ff6600;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	.order-tabs {
		width: 100%;
		display: flex;
		background-color: #fff;
		justify-content: space-around;
		flex-direction: row;
		align-content: space-around;
		flex-wrap: wrap;
		height: 79rpx;
		line-height: 45rpx;
		margin-bottom: 30rpx;
	}
	.vs {
		margin: 0px 13rpx;
	}
	.tab.active {
		width: 55rpx;
		border-bottom: 7rpx #ff6600 solid;
		color: #ff6600;
	}
	.tab.activeto {
		color: #ff6600;
		font-weight: 600;
	}
	/* #endif */
	

	.tab-content {
		margin-top: 10px;
	}
	

	.son {
		width: 90%;
		margin: auto;

	}
</style>